<template>
  <div>
    <v-container id="inspire">
      <v-timeline
          light
          align-top
          :dense="true"
      >
        <v-timeline-item
            v-for="(item, i) in items"
            :key="i"
			color='#FD564F'
            icon-color="#FFFFFF"
			small
        >
          <v-card @click="gopage(item.link)" style="border: #f9846a solid 1px; border-radius: 18px" elevation="3" >
            <v-card-title class="text-h6" style="height: 6vh">
              <p icon="mdi-alert-rhombus" style="font-size: 24px">
                {{item.title}}
              </p>
            </v-card-title>

            <v-row style="margin-left: 1%;;margin-top: -1vh;margin-bottom: 1vh">
				<!--
              <v-col md="1">
                <v-spacer></v-spacer>
              </v-col>
              -->
<!--              <v-col md = "6">-->
<!--                <v-btn-->
<!--                    class="mx-0"-->
<!--                    outlined-->
<!--                    @click="gopage(item.link)"-->
<!--                >-->
<!--                  阅读原文-->
<!--                </v-btn>-->
<!--                &nbsp;-->
<!--                <v-menu offset-y v-if="isManager" >-->
<!--                  <template v-slot:activator="{ on, attrs }">-->
<!--                    <v-btn-->
<!--                        color="primary"-->
<!--                        dark-->
<!--                        v-bind="attrs"-->
<!--                        v-on="on"-->
<!--                    >-->
<!--                      操作-->
<!--                    </v-btn>-->
<!--                  </template>-->

<!--                  <v-list>-->
<!--                    <v-list-item @click="removepassage(item,i)">-->
<!--                      <v-list-item-title>删除</v-list-item-title>-->
<!--                    </v-list-item>-->
<!--                  </v-list>-->
<!--                </v-menu>-->
<!--              </v-col>-->
              <v-col style="color: #b5b5b5; font-size: 18px">
                <span style="font-family: 微软雅黑">
                  来源：{{item.source}}
                &nbsp; 发布时间：{{item.pubTime.substring(0,10)}}
                </span>
              </v-col>
            </v-row>
          </v-card>
        </v-timeline-item>
      </v-timeline>
      <v-btn width="93%" outlined color="error" @click="loadannouce" class="more_inf" >加载更多</v-btn>
    </v-container>
  </div>
</template>
<!--
{
        id: 1,
        title:'震惊',
        abstract: "摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要",
        source:"人民网",
        pubTime:"2077年",
        link :"https://vuetifyjs.com/zh-Hans/api/v-btn/"
      },
      {
        id: 1,
        title:'震惊',
        abstract: "摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要",
        source:"人民网",
        pubTime:"2077年",
        link :"https://vuetifyjs.com/zh-Hans/api/v-btn/"
      },
      {
        id: 1,
        title:'震惊',
        abstract: "摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要",
        source:"人民网",
        pubTime:"2077年",
        link :"https://vuetifyjs.com/zh-Hans/api/v-btn/"
      },
      {
        id: 1,
        title:'震惊',
        abstract: "摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要",
        source:"人民网",
        pubTime:"2077年",
        link :"https://vuetifyjs.com/zh-Hans/api/v-btn/"
      },
      {
        id: 1,
        title:'震惊',
        abstract: "摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要",
        source:"人民网",
        pubTime:"2077年",
        link :"https://vuetifyjs.com/zh-Hans/api/v-btn/"
      },
-->

<script>

export default {
  name: "AnnounceTimeline",
  data: () => ({
    items: [
    ],
    nowpage: 1,
    totalpage : 0,
    isManager: true,
  }),
  created() {
    this.loadannouce()
    this.isManager = this.$store.state.user.isManager
  },
  methods:{
    gopage(url){
      window.open(url)
    },
    loadannouce(){

      if (this.nowpage == this.totalpage){
        this.$Message.info("已无更多通告")
        return
      }
      this.$api.article.getAnnouncements(this.nowpage-1,10,"").then(res =>{
        if (this.nowpage == 1){
          this.items = []
        }
        let result = res
        console.log(result.data.success);
        if (result.success === true){
          var annoucelist = result.data
          this.items.push(annoucelist[0])
          this.items.push(annoucelist[1])
          this.items.push(annoucelist[2])
          this.items.push(annoucelist[3])
          this.items.push(annoucelist[4])
			this.items.push(annoucelist[5])
			this.items.push(annoucelist[6])
			this.items.push(annoucelist[7])
			this.items.push(annoucelist[8])
			this.items.push(annoucelist[9])
          this.nowpage = this.nowpage + 1
          this.totalpage = result.totalPage
        }
        else {
          this.$Message.error("请求失败,原因："+ result.data.exc)
        }
      }).catch(function (error){
        console.log(error)
        this.$Message.error("请求失败,出现了意料之外的错误")
      })
    },
    removepassage(item,i){
      this.$api.article.delete(item.id).then(res =>{
        let result = res.data
        if (result.success){
          this.items.splice(i,1)
          this.$Message.success("删除成功")
          this.loadknowledge(this.pageCount,5)
        }
        else {
          this.$Message.error("删除失败,出现了意料之外的错误")
        }
      }).catch(function (error){
        console.log(error)
        this.$Message.error("请求失败,出现了意料之外的错误")
      })

    },
  }

}
</script>

<style scoped>
.theme--light.{
  border: #FD564F solid 1px;
}
.theme--light.v-timeline:before {
  background: #FD564F;
}
.more_inf{
	min-height: 5vh;
	left: 7%;
	margin-top: 1vh;
	border: #FD564F solid 1px;
	background: #FFFFFF;
	box-shadow: none;
	font-size: 18px;

}
</style>
